<template>
  <a-spin :spinning="loading">
  <div style="padding: 10px;">
    <div style='margin-bottom: 10px;'>
    <div>
      <label>口令：</label>
      <a-input v-model:value="kouling" style="width: 300px;" placeholder="请输入口令" />
      <a-button type="primary" :icon="h(PlusOutlined)" @click="showAnalysisModal" style="margin-left: 10px;">生成分析图</a-button>

      <label>单位：</label>
      <a-input v-model:value="danwei" style="width: 300px;" placeholder="请输入单位" />
      <!-- <a-button type="primary" :icon="h(SearchOutlined)" style="margin-left: 10px;">搜索</a-button> -->
      <a-button type="primary" :icon="h(PlusOutlined)" @click="showAnalysisModal1" style="margin-left: 10px;">生成分析图</a-button>
    </div>
    <div style='margin-top: 10px;display: flex;'>
      <!-- <a-range-picker v-model:value="value3" /> -->
      <div>
        <label>时间：</label>
        <a-range-picker
        style="width: 350px;"
        v-model:value="selectedRange"
        :format="dateFormat"
        show-time
        @change="onChange"
      />
          </div>
      
      <div>
        <label>口令：</label>
        <a-input v-model:value="param.pass" style="width: 200px;" placeholder="请输入口令" />
      </div>
      <div style="margin-left: 15px;">
        <label>单位名称：</label>
        <a-input v-model:value="param.unitName" style="width: 200px;" placeholder="请输入单位名称" />
      </div>
      <div style="margin-left: 15px;">
        <label>姓名：</label>
        <a-input v-model:value="param.name" style="width: 200px;" placeholder="请输入姓名" />
      </div>
      <a-button type="primary" :icon="h(SearchOutlined)" style="margin-left: 10px;" @click='seachclk'>搜索</a-button>
    </div>
    </div>
    <a-table
    :columns="columns"
    :dataSource="examData.records"
    :pagination="pagination"
    :scroll="{
                  y: '450px',
                }"
    @change="handleTableChange"
  >
    <template #actions="{ record }">
      <!-- {{record}} -->
      <a-button type="link" v-if='record.examVO' @click="showDetail(record)">详情</a-button>
    </template>
  </a-table>

  </div>
  <a-modal
    v-model:open="isModalVisible"
    title="详情"
    @cancel="handleCancel"
    @ok="handleCancel"
    width="60%"
  >
    <a-descriptions title="" :column="2" bordered>
      <a-descriptions-item label="题目名称">{{ detailData?.bankName }}</a-descriptions-item>
      <a-descriptions-item label="考生姓名">{{ detailData?.candidateName }}</a-descriptions-item>
      <a-descriptions-item label="考生成绩">{{ detailData?.score }}</a-descriptions-item>
      <a-descriptions-item label="答对题目">{{ detailData?.rightNum }}/{{ detailData?.totalNum }}</a-descriptions-item>
    </a-descriptions>

    <a-table
      :columns="questionColumns"
      :dataSource="detailData?.examVO.questionsVOS"
      rowKey="id"
      :scroll="{
                  y: '600px',
                }"
      :pagination="false"
    >
      <template #options="{ record }">
        <div class="options">
          <span v-for="option in record.optionsVOS" :key="option.id" class="option">
            {{ option.number }}. {{ option.content }}
          </span>
        </div>
      </template>
    </a-table>
  </a-modal>
  <!-- 弹框：生成分析图 -->
  <a-modal
      v-model:open="isAnalysisModalVisible"
      title=""
      @ok="handleAnalysisCancel"
      @cancel="handleAnalysisCancel"
      width="70%"
    >
      <!-- 弹框内容 -->
      <div>
        <div  style='padding-top: 30px;font-size: 30px;text-align: center;font-weight: bold;'>考生成绩分析报告</div>
       <div style="display: flex;text-align: right;width: 100%;">
       
        
        <div style='text-align: center;margin-left: 550px;margin-top: 10px;font-size: 20px;'>口令：{{ kouling }}</div> <!-- 固定的口令 -->
        <div style='text-align: center;margin-left: 50px;margin-top: 10px;font-size: 20px;'>总人数：{{ recordsDetail.records.length }}</div> <!-- 固定的口令 -->
        <div style="text-align: center;margin-left: 50px;margin-top: 10px;">
          <a-button @click="exportData" type="primary">导出成绩</a-button>
        </div>
       </div>

        <div style="text-align: center;margin:  0 auto;" class="custom-antd-table-wrapper">
          <a-table
          :pagination="false"
            :columns="columnss"
            :data-source="recordsDetail.tu"
            row-key="id"
            bordered
             :scroll="{ x: 'max-content', y: '400px',hideOnSinglePage:true }"
          >
            <template #headerCell="{ title }">
              <div class="custom-header">{{ title }}</div>
            </template>
            <template #headerRow>
              <tr class="custom-header-row">
                <th v-for="col in columns" :key="col.key" class="custom-header">
                  {{ col.title }}
                </th>
              </tr>
            </template>
          </a-table>
        </div>
        <div>
          
        </div>
        <!-- 图表区域 -->
        <div style="display: flex; justify-content: space-between; align-items: center;margin: 20px;margin-left:100px;">
          
          <!-- 左边：第二次考试 -->
          <div ref="chart" style="width: 80%; height: 600px;"></div>
        </div>
        <!-- <div style="display: flex; justify-content: space-between; align-items: center;margin: 20px;margin-left:100px;">
          <div ref="chart1" style="width: 80%; height: 600px;"></div>
          <div ref="chart2" style="width: 80%; height: 600px;"></div>
          <div ref="chart3" style="width: 80%; height: 600px;"></div>
        </div> -->
        <!-- 动态生成图表 -->
        <div class="chart-grid">
          <div 
            v-for="(chartData, title, index) in dynamicChartData" 
            :key="title"
            class="chart-item"
          >
            <div style="text-align: center; font-size: 20px; margin: 10px;">{{ title }}</div>
            <div 
              :ref="`chart_${index}`" 
              :id="`chart_${index}`" 
              style="width: 100%; height: 600px;">
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </a-spin>
</template>

<script lang="ts" setup>
import { h,computed } from 'vue';
import * as XLSX from 'xlsx'
// import moment from 'moment';
import { Moment } from 'moment';
import { SearchOutlined,PlusOutlined } from '@ant-design/icons-vue';
import { ref,onMounted,watch,nextTick } from 'vue';
import { PaginationProps } from 'ant-design-vue/es/pagination';
import { list,learnAfter,publicStatistics } from './sc.ts';
import { reactive } from 'vue';
import { message } from 'ant-design-vue';

import * as echarts from 'echarts';
const dateFormat = 'YYYY-MM-DD HH:mm:ss';
// 设置开始和结束的默认日期
// const startDate = moment('2022-02-02 00:00:00', dateFormat);
// const endDate = moment('2022-02-02 23:59:59', dateFormat);

// 使用 ref 绑定选定的日期范围
const selectedRange = ref<Moment[]>([]);


const exportData = () => {
  // 模拟数据数组（实际使用时替换为实际数据）

  // 格式化数据为适合导出的表格格式
  const formattedData = recordsDetail.records.map(item => ({
    '题目名称': item.bankName,
    // '考生编号': item.candidateId.join(', '),
    '姓名': item.name,
    '单位名称': item.unitName,
    '第一次成绩': item.oneScore,
    '第二次成绩': item.twoScore,
    '第一次创建时间': item.oneCreateTime,
    '第二次创建时间': item.twoCreateTime,
    '第一次答题总数': item.onetotalNum,
    '第二次答题总数': item.twototalNum,
    '第一次正确数': item.oneRightNum,
    '第一次错误数': item.oneWrongNum,
    '第二次正确数': item.twoRightNum,
    '第二次错误数': item.twoWrongNum,
  }));

  // 创建 Excel 工作簿
  const ws = XLSX.utils.json_to_sheet(formattedData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, '成绩数据');

  // 导出 Excel 文件
  XLSX.writeFile(wb, '考试成绩分析报告.xlsx');
};
// 假设基础信息题和调查问卷的数据如下：
let questionData = reactive({
});

// 动态图表数据
const dynamicChartData = reactive({});
const examData = reactive({
  total: 0, // 模拟总数据条数
  pageNo:1,
  pageSize:10,
  records: [
    // {
    //   id: 21,
    //   bankName: "传染病认知问卷调查表",
    //   candidateName: "张三",
    //   score: 70,
    //   totalNum: 4,
    //   rightNum: 3,
    //   wrongNum: 1,
    //   examVO: {
    //     candidateId: 55,
    //     bankId: 1,
    //     bankName: "传染病认知问卷调查表",
    //     questionsVOS: [
    //       {
    //         id: 1,
    //         content: "您的年龄",
    //         isMultipleChoice: 0,
    //         valueOfScore: 2,
    //         optionsVOS: [
    //           { id: 1, content: "20岁以下", number: "A" },
    //           { id: 2, content: "20岁以上", number: "B" }
    //         ],
    //         respondAnswers: "A",
    //         correctAnswer: "A"
    //       },
    //       {
    //         id: 2,
    //         content: "您的性别",
    //         isMultipleChoice: 0,
    //         valueOfScore: 2,
    //         optionsVOS: [
    //           { id: 3, content: "男", number: "A" },
    //           { id: 4, content: "女", number: "B" }
    //         ],
    //         respondAnswers: "A",
    //         correctAnswer: ""
    //       }
    //     ]
    //   }
    // },
    // 这里可以继续添加其他 9 条记录
  ]
});
const columns = [
  { title: '题目名称', dataIndex: 'bankName' },
  { title: '口令', dataIndex: 'passcode' },
  { title: '考生姓名', dataIndex: 'candidateName' },
  { title: '单位名称', dataIndex: 'candidateUnitName' },
  { title: '成绩', dataIndex: 'score' },
  { title: '创建时间', dataIndex: 'createTime' },
  {
    title: '操作',
    key: 'actions',
    slots: { customRender: 'actions' }
  }
];
const dataSources = reactive([
  {
    id: 1,
    title: '题目一',
    correct: 80,
    incorrect: 20,
    correctRate: '80%',
    incorrectRate: '20%',
  },
  {
    id: 2,
    title: '题目二',
    correct: 50,
    incorrect: 50,
    correctRate: '50%',
    incorrectRate: '50%',
  },
]);
const columnss = reactive([
  {
    title: '题目名称',
    dataIndex: 'title',
    key: 'title',
    width:'300px'
  },
  {
    title: '正确人数',
    dataIndex: 'rightNum',
    key: 'rightNum',
  },
  {
    title: '错误人数',
    dataIndex: 'errorNum',
    key: 'errorNum',
  },
  {
    title: '正确率',
    dataIndex: 'right',
    key: 'right',
  },
  {
    title: '错误率',
    dataIndex: 'error',
    key: 'error',
  },
]);
const recordsDetail = reactive({
  records:[
        {
          "id": null,
          "bankId": null,
          "bankName": "测试分析",
          "candidateId": [
            106,
            117
          ],
          "name": "曾庆天1",
          "unitName": "测试1",
          "oneAnswerResult": "{\"bankId\": 6, \"bankName\": \"测试分析\", \"candidateId\": 106, \"questionsVOS\": [{\"id\": 70, \"other\": \"5\", \"bankId\": 6, \"content\": \"测试1\", \"optionsVOS\": [{\"id\": 191, \"number\": \"A\", \"content\": \"1\", \"questionId\": 70}, {\"id\": 192, \"number\": \"B\", \"content\": \"2\", \"questionId\": 70}], \"valueOfScore\": 1, \"correctAnswer\": \"A\", \"respondAnswers\": \"A\", \"isMultipleChoice\": 0}]}",
          "twoAnswerResult": "{\"bankId\": 6, \"bankName\": \"测试分析\", \"candidateId\": 117, \"questionsVOS\": [{\"id\": 70, \"other\": \"15\", \"bankId\": 6, \"content\": \"测试1\", \"optionsVOS\": [{\"id\": 191, \"number\": \"A\", \"content\": \"1\", \"questionId\": 70}, {\"id\": 192, \"number\": \"B\", \"content\": \"2\", \"questionId\": 70}], \"valueOfScore\": 1, \"correctAnswer\": \"A\", \"respondAnswers\": \"B\", \"isMultipleChoice\": 0}]}",
          "oneScore": 1,
          "twoScore": 0,
          "oneCreateTime": "2024-10-17 14:08:27",
          "twoCreateTime": "2024-10-17 15:11:59",
          "onetotalNum": 1,
          "twototalNum": 1,
          "oneRightNum": 1,
          "oneWrongNum": 0,
          "twoRightNum": 0,
          "twoWrongNum": 1
        },
        {
          "id": null,
          "bankId": null,
          "bankName": "测试分析",
          "candidateId": [
            108,
            119
          ],
          "name": "曾庆天3",
          "unitName": "测试3",
          "oneAnswerResult": "{\"bankId\": 6, \"bankName\": \"测试分析\", \"candidateId\": 108, \"questionsVOS\": [{\"id\": 70, \"other\": \"12\", \"bankId\": 6, \"content\": \"测试1\", \"optionsVOS\": [{\"id\": 191, \"number\": \"A\", \"content\": \"1\", \"questionId\": 70}, {\"id\": 192, \"number\": \"B\", \"content\": \"2\", \"questionId\": 70}], \"valueOfScore\": 1, \"correctAnswer\": \"A\", \"respondAnswers\": \"A\", \"isMultipleChoice\": 0}]}",
          "twoAnswerResult": "{\"bankId\": 6, \"bankName\": \"测试分析\", \"candidateId\": 119, \"questionsVOS\": [{\"id\": 70, \"other\": \"6\", \"bankId\": 6, \"content\": \"测试1\", \"optionsVOS\": [{\"id\": 191, \"number\": \"A\", \"content\": \"1\", \"questionId\": 70}, {\"id\": 192, \"number\": \"B\", \"content\": \"2\", \"questionId\": 70}], \"valueOfScore\": 1, \"correctAnswer\": \"A\", \"respondAnswers\": \"B\", \"isMultipleChoice\": 0}]}",
          "oneScore": 1,
          "twoScore": 0,
          "oneCreateTime": "2024-10-17 14:09:35",
          "twoCreateTime": "2024-10-17 15:12:46",
          "onetotalNum": 1,
          "twototalNum": 1,
          "oneRightNum": 1,
          "oneWrongNum": 0,
          "twoRightNum": 0,
          "twoWrongNum": 1
        }
  ],
  tu:[]
})
// 弹框状态
const isAnalysisModalVisible = ref(false); // 控制分析图弹框

// 监听 modal 的打开状态
watch(isAnalysisModalVisible, async (newVal) => {
  if (newVal) {
    // 等待 DOM 渲染完成
    await nextTick();
    await initChart();
    await generateChartData();
    await initCharts();
  }
});
let kouling = ref('')
let danwei = ref('')
// 监听 modal 的打开状态
watch(danwei, async (newVal) => {
  if (newVal) {
    kouling.value= ''
  }
});
// 监听 modal 的打开状态
watch(kouling, async (newVal) => {
  if (newVal) {
    danwei.value= ''
  }
});
// 根据数据动态生成图表配置
const generateChartData = async() => {
  let param = {}
  if(kouling.value){
    param = {
      pass:kouling.value
    }
  }else{
    param = {
      unitName:danwei.value
    }
  }
  const res1 = await publicStatistics(param)
  questionData = res1
  console.log(res1,"resres")
  const allCharts = { ...questionData["基础信息题"], ...questionData["调查问卷"] };
  Object.entries(allCharts).forEach(([title, answers]) => {
    const categories = answers.map(answer => Object.keys(answer)[0]);
    const data = answers.map(answer => {
      // 获取选项名称和对应的值
      const option = Object.keys(answer)[0];  // 获取选项的名称
      const value = Object.values(answer)[0]; // 获取选项对应的数量
      
      // 解析选项名称（例如 "A:20岁以下"），并格式化为 "20岁以下-3"
      const [key, name] = option.split(":");
      return { value, name: `${name}-${value}` }; // 格式化成你需要的结构
    });
    dynamicChartData[title] = {
      title: title,
      categories,
      data
    };
  });
};
// const chartRefs = ref<(HTMLDivElement | null)[]>([]); // 保存 ref 引用
// 引用容器的数组
// const chartRefs = ref([]);
// 初始化图表
const initCharts = () => {
  Object.keys(dynamicChartData).forEach((title,index) => {
    // const chartDom = chartRefs.value[index]; // 使用 chartRefs 访问图表容器
    // 打印 ref 数组，确保它正确绑定
    console.log(`chart_${index}`,"chart_${index}chart_${index}")
    const chartDom = document.getElementById(`chart_${index}`);
    console.log(chartDom); 
    if (chartDom) {
      const chart = echarts.init(chartDom);
      const chartData = dynamicChartData[title];
      console.log(chartData.data,"chartData.datachartData.data")
      const option = {
        title: {
          text: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          data: chartData.data,
          type: 'pie',
          radius: '50%',
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }],
      };
      chart.setOption(option);
    } else {
      console.error(`Chart container #chart_${index} not found.`);
    }
  
  });
};
const loading = ref(false);
// 关闭分析图弹框
const handleAnalysisCancel = () => {
  isAnalysisModalVisible.value = false;
};

const showAnalysisModal1 = () =>{
  if(!danwei.value){
    message.warning('请先输入单位');
    return
  }
  loading.value = true
  // isAnalysisModalVisible.value = true;
  learnAfter1({
    unitName:danwei.value
  })
}
// 显示生成分析图的弹框
const showAnalysisModal = () => {
  if(!kouling.value){
    message.warning('请先输入口令');
    return
  }
  loading.value = true
  learnAfter1({
    passcode:kouling.value
  })
};
const learnAfter1 = async(obj) =>{
  let par = ''
  if(obj.passcode){
    par =  `?pageNo=1&pageSize=20000&passcode=${obj.passcode}`
  }else{
    par =  `?pageNo=1&pageSize=20000&unitName=${obj.unitName}`

  }
  const res = await learnAfter(par)
  recordsDetail.records = res.page.records
  const result = Object.entries(res.tu).map(([title, values]) => ({
    title,
    ...values
}));
recordsDetail.tu = result
  // recordsDetail.tu.push(res.tu.测试1)

  isAnalysisModalVisible.value = true
  loading.value = false
  console.log("666",recordsDetail.tu)
}
const questionColumns = [
  { title: '题目', dataIndex: 'content' },
  { title: '分值', dataIndex: 'valueOfScore' },
  { title: '输入选项', dataIndex: 'respondAnswers' },
  { title: '正确答案', dataIndex: 'correctAnswer' },
  { title: '选项', key: 'options', slots: { customRender: 'options' } }
];

const isModalVisible = ref(false);
const detailData = ref<any>(null);

const showDetail = (record: any) => {
  detailData.value = record;
  isModalVisible.value = true;
  
};

const handleCancel = () => {
  isModalVisible.value = false;
};

const pagination = computed(() => ({
  current: examData.pageNo,
  pageSize: 10,
  total: examData.total, // 总条数
  onChange(page) {
    examData.pageNo = page
    // console.log(page,"pagepage")
    // console.log(examData.pageNo,"examData.pageNo")
    // if(page > examData.pageNo){
    //   examData.pageNo++
    // }else{
    //   examData.pageNo--
    // }
    // console.log(page,"666")
    // pagination.current = page;
    // 请求新数据逻辑，示例中为模拟
    lists();
  }
}));

const fetchExamData = (page: number) => {
  // 模拟请求新数据，实际上应该是向后端请求数据
  console.log(`Fetching data for page ${page}`);
  // 假设你有新的数据返回，更新examData
  // examData.value = newData; // 这里需要替换成实际的数据
};

const handleTableChange = (pagination) => {
  pagination.current; // 获取当前页码
  pagination.pageSize; // 获取每页条数
  // 在这里可以添加获取新数据的逻辑，比如重新请求数据
};

let param = reactive({
    pageNo:examData.pageNo,
    pageSize:examData.pageSize,
    name:'',
    pass:'',
    unitName:'',
    beginTime:'',
    endTime:'',
  })
  // 联动函数：当选择范围改变时触发
const onChange = (value: Moment[], dateString: string[]) => {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      param.beginTime = dateString[0]
       param.endTime = dateString[1] 
    };

const lists = async()=>{
  loading.value = true
  param.pageNo = examData.pageNo
  param.pageSize = examData.pageSize
  console.log(param,"examData.pageNo")
  const res = await list(param)
  loading.value = false
  examData.records = res.records
  examData.total = res.total
}
const chart = ref(null);
// const chart1 = ref(null);
// const chart2 = ref(null);
// const chart3 = ref(null);

const initChart = () => {
  if(chart.value){
    const arr1 = [];
    const arr2 = [];
    const arr3 = [];
    // 遍历数据并填充数组
    recordsDetail.records.forEach(item => {
      // let oneAnswerResult =  JSON.parse(item.oneAnswerResult)
      // let twoAnswerResult =  JSON.parse(item.twoAnswerResult)

        arr1.push(item.name);  // 将 name 放入 arr1
        arr2.push(item.oneScore);  // 将 candidateId 数组展开并放入 arr2
        arr3.push(item.twoScore);  // 将 candidateId 数组展开并放入 arr2

    });
    // 检查modal是否打开
  var myChart = echarts.init(chart.value);
  // var myChart1 = echarts.init(chart1.value);
  // var myChart2 = echarts.init(chart2.value);
  // var myChart3 = echarts.init(chart3.value);
  const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['第一次考试', '第二次考试']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    show: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: arr1
  },
  series: [
    {
      name: '第一次考试',
      type: 'bar',
      data: arr2,
      label: {
        show: true,  // 默认显示数据
        position: 'insideRight'  // 数据标签的位置，根据需要可以调整
      }
    },
    {
      name: '第二次考试',
      type: 'bar',
      data: arr3,
      label: {
        show: true,  // 默认显示数据
        position: 'insideRight'  // 数据标签的位置，根据需要可以调整
      }
    }
  ]
  };
  const option1 = {
  title: {
    text: '年龄比例',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 3, name: '20岁以下-3' },
        { value: 2, name: '20岁以上-2' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
const option2 = {
  title: {
    text: '学历比例',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 3, name: '高中/中专及以下-1' },
        { value: 2, name: '大专-2' },
        { value: 2, name: '本科-2' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
const option3 = {
  title: {
    text: '性别比例',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 5, name: '男-5' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
option && myChart.setOption(option);
// option1 && myChart1.setOption(option1);
// option2 && myChart2.setOption(option2);
// option3 && myChart3.setOption(option3);
  }
}

const seachclk = () =>{
  lists()
}
onMounted(async() => {
  lists()
  initChart()
  // 如果从外部带了 pass 参数，自动打开分析图
  const url = new URL(window.location.href);
  const pass = url.searchParams.get('pass');
  if (pass) {
    kouling.value = pass;
    showAnalysisModal();
  }
});
  // examData.value = res
// })

</script>
<style>
.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行 3 个图表 */
  gap: 20px; /* 图表之间的间距 */
}

.chart-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


</style>
<style scoped lang="less">


.custom-antd-table-wrapper {
  height: 100%;
  ::v-deep(.ant-table-wrapper) {
    height: 100%;
    .ant-spin-nested-loading {
      height: 100%;
    }
    .ant-spin-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      .ant-table {
        flex: 1;
        height: 0;
      }
      .ant-pagination {
        flex-shrink: 0;
      }
    }
    .ant-table-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      > .ant-table-header {
        flex-shrink: 0;
      }
      > .ant-table-body {
        flex: 1;
        height: 0;
      }
    }
  }
}
/* 图表样式 */
pre {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}
.options {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.option {
  padding: 8px 12px;
  margin: 5px 0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  transition: background-color 0.3s;
  cursor: pointer;
}

.option:hover {
  background-color: #e6f7ff;
  border-color: #91d5ff;
}

.option:active {
  background-color: #bae7ff;
  border-color: #40a9ff;
}
.custom-header-row {
  background-color: #efc004;
}
.custom-header {
  
  padding: 8px;
  text-align: center;
  font-weight: bold;
}

.a-table {
  width: 800px;
}
</style>
